<template>
    <div class="tab-content">
        <el-form ref="sharedTravelFormRef" :model="sharedTravelForm" :rules="sharedTravelRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="民用" prop="civilian">
                        <el-input-number v-model="sharedTravelForm.civilian" placeholder="请输入民用数量" :controls="false" :validate-event="true"/>
                        <!-- <span style="margin-left: 8px; color: #909399;">辆</span> -->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="外卖" prop="takeaway">
                        <el-input-number v-model="sharedTravelForm.takeaway" placeholder="请输入外卖数量" :controls="false" />
                        <!-- <span style="margin-left: 8px; color: #909399;">辆</span> -->
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="共享单车" prop="sharedBike">
                        <el-input-number v-model="sharedTravelForm.sharedBike" placeholder="请输入共享单车数量" :controls="false"/>
                        <!-- <span style="margin-left: 8px; color: #909399;">辆</span> -->
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="savesharedTravelData">保存共享出行数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'


    // 数字范围验证函数
    const validateNumber = (rule: any, value: number, callback: (error?: Error) => void) => {
        if (value === null || value === undefined) {
            callback(new Error('请输入数字'))
        } else if (value < 0) {
            callback(new Error('请输入大于等于0的数字'))
        } else if (value > 1000000) {
            callback(new Error('请输入小于等于1000000的数字'))
        } else {
            callback()
        }
    }
    // 表单验证规则
    const sharedTravelRules = {
        civilian: [
            { required: true, message: '民用数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        takeaway: [
            { required: true, message: '外卖数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        sharedBike: [
            { required: true, message: '共享单车数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ]
    }
    // 模块1: 共享出行数据配置表单
    const sharedTravelForm = ref<{
        civilian: number, 
        takeaway: number, 
        sharedBike: number
    }>({
        civilian: 0, // 民用
        takeaway: 0, // 外卖
        sharedBike: 0 // 共享单车
    })

    

    
    // 保存函数
    const sharedTravelFormRef = ref()
    const savesharedTravelData = async () => {
        if (!sharedTravelFormRef.value) return
        
        try {
            await sharedTravelFormRef.value.validate()
            await updateDataClassify({
                id: 4,
                key: 'module1',
                value: sharedTravelForm.value
            })
            console.log('保存共享出行数据配置:', sharedTravelForm.value)

            ElMessage.success('共享出行数据配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            sharedTravelForm.value = module
        }else{
            sharedTravelForm.value = {
                civilian: 0, // 民用
                takeaway: 0, // 外卖
                sharedBike: 0 // 共享单车
            }
        }
    }
    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>